<!--
  @Description:选择楼层类型
  @Author: zqy
  @Date: 2020-08-01 13:41:18
  @Last Modified by:   zqy
  @Last Modified time: 2020-08-01 13:41:18
 -->
<template>
  <div class="floor-type">
    <div class="type-item" @click="selectedType('content')">
      <img src="../images/contentFloor.svg">
      <div class="t-name">内容</div>
    </div>
    <div class="type-item" @click="selectedType('fastlink')">
      <div class="fast-icon">
        <img src="../images/fastlinkFloor.svg">
      </div>
      <div class="t-name">快速入口</div>
    </div>
    <div class="type-item" @click="selectedType('question')">
      <img src="../images/questionFloor.svg">
      <div class="t-name">常见问题</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActPageFloorType',
  data() {
    return {

    }
  },
  created() {

  },

  methods: {
    selectedType(type) {
      this.$emit('change', type)
    }
  }
}
</script>
<style lang='scss' scoped>
.floor-type{
  padding-top: 100px;
  width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .type-item{
    width: 100px;
    margin:  0 20px;
    cursor: pointer;
    img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .fast-icon{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    img{
      position: absolute;
      left: -15px;
      top: -15px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
    }
  }
  .t-name{
    text-align: center;
    margin-top: 10px;
  }
}
</style>
